<template>
  <view class="topic-box">
    <view class="top-nav">
      <!-- 顶部 -->
      <TopicTopNav
        :page="config.page"
        :total="config.total"
        :cost-time="config.costTime"
        @reset="againHandle"
      ></TopicTopNav>
    </view>
    <result
      ref="refesultRef"
      :cost-time="config.costTime"
      :correctness="config.correctness"
      :topic-list="topicList"
      @again="againHandle"
    ></result>

    <view class="topic-context">
      <view class="topic-text">{{ topicList[config.page - 1].topic }}</view>
    </view>

    <view class="keyboard-box">
      <keyboard v-model:input-val="inputValue" @ok="submit"></keyboard>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Result from './components/result.vue'
import TopicTopNav from '@/components/topic-nav/src/top-nav.vue'
import keyboard from '@/components/keyboard/src/index.vue'

import { onMounted } from 'vue'

import { useComputeStore } from '@/store'
import { isFunction } from 'lodash-es'

const computeStore = useComputeStore()

onMounted(() => {
  uni.$once('a123', (e) => {
    console.log(e, 9999999999)
  })
})

//import {} from 'lodash-es'
const refesultRef = ref<InstanceType<typeof Result>>()

const topicList = ref<GenerateTopicType[]>([])

const inputValue = ref('')

const againHandle = () => {
  inputValue.value = ''
  generateSubtractionProblem()
  refesultRef.value?.close()
  config.value.page = 1
}

function generateSubtractionProblem() {
  if (!isFunction(computeStore.topic?.config?.generateTopic)) {
    return
  }

  const generateTopicNumber = computeStore.topic.generateTopicNumber || 10

  for (let i = 0; i < generateTopicNumber; i++) {
    topicList.value.push(computeStore.topic?.config?.generateTopic())
  }

  console.log(topicList.value, 'topicList')
}

generateSubtractionProblem()

/**
 * 确定
 */
const submit = (e: any) => {
  const item = topicList.value[config.value.page - 1]

  console.log(item.answer, e.inputValue)

  item['youAnswer'] = e.inputValue

  if (item.deviation) {
    const jdwc = parseInt(item.answer as string) - parseInt(e.inputValue)
    const xdwx = jdwc / parseInt(item.answer as string)
    if (xdwx >= -item.deviation && xdwx <= item.deviation) {
      item['ok'] = true
    }
  } else {
    if (item.answer == e.inputValue) {
      item['ok'] = true
    }
  }

  console.log(topicList.value)

  if (config.value.page >= config.value.total) {
    const ok = topicList.value.filter((v) => v.ok)

    if (!computeStore.topic.generateTopicNumber) {
      return
    }
    config.value.correctness =
      (ok.length / computeStore.topic.generateTopicNumber) * 100 + '%'

    refesultRef.value?.open()
    clearInterval(timeFun.value)
    return
  }

  if (config.value.page < config.value.total) {
    config.value.page++
  }
}

const config = ref({
  page: 1,
  total: 10,
  costTime: 0,
  correctness: '0%',
})

/**
 * 开始计时
 */
const timeFun = ref()
const startTime = () => {
  clearInterval(timeFun.value)
  timeFun.value = setInterval(() => {
    config.value.costTime++
  }, 1000)
}

startTime()
</script>
<style lang="scss" scoped>
.topic-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;

  .top-nav {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: #fff;
  }

  .topic-context {
    width: 100%;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .topic-text {
      margin-top: 100rpx;
      font-size: 1.5rem;
      font-weight: 700;
    }
  }

  .keyboard-box {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
}
</style>
